<template>
    <div style="height:100%;" :id="mapId" class="map">
    </div>
</template>
<script>
import esriLoader from "esri-loader";
import Global from "./Global";
//import bus from "./Bus.js";
import axios from "axios";
import Bus from "./Bus.js";
  import mapEventManager from '../JavaScript/MapEventManager'
//import 'Scripts/ArcGISAPI/3.16/esri/css/esri.css';
//esriLoader.loadCss("Scripts/ArcGISAPI/3.16/esri/css/esri.css");
export default {
  components: {},
  name: "Map",
  data() {
    return {
      wkid:parseInt(this.GLOBAL.mapWkid),
      zoom:parseInt(this.GLOBAL.mapZoom),
      x:parseFloat(this.GLOBAL.x),
        y:parseFloat(this.GLOBAL.y),
      esriMap: {},
      ecchMapList_1: {
        
        
      }
    };
  },
  props: {
    mapId: {
      type: String,
      default: "mainMap"
    }
  },
  created() {},
  mounted: function() {
    var self = this;
    const options = {
      url: "./static/arcgis_js_v322_api/init.js",
      css: "./static/arcgis_js_v322_api/esri/css/esri.css",
      // tell Dojo where to load other packages
      dojoConfig: {
        baseUrl: "./static/arcgis_js_v322_api/dojo",
        parseOnLoad: true,
        async: true,
        packages: [{}],
        layers: {
          geometryServer: {
            id: "geometryServer",
            title: "图形服务",
            url:
              "https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"
          }
        }
      }
    };
    esriLoader.loadCss("./static/arcgis_js_v322_api/esri/css/esri.css");
    window.loadScriptPromise = esriLoader.loadScript(options);
    window.loadScriptPromise
      .then(() => {
        self.createMap();
      })
      .catch(err => {
        console.error(err);
      });
  },
  methods: {
    string2XML: function string2XML(xmlString) {
      //所有浏览器统一用这种方式处理(因为高版本的浏览器都支持)
      var parser = new DOMParser();
      var xmlObject = parser.parseFromString(xmlString, "text/xml");
      return xmlObject;
    },
    createMap: function() {
     // alert();
      var self = this;
      esriLoader
        .loadModules([
          "widget/map/MapPane",
          "widget/map/basemapGallery/BasemapGallery",
          "dojo/topic"
        ])
        .then(([MapPane, BasemapGallery, topic]) => {
          /*
         * 加载basemap 包含两个图层 矢量图层和影像图层  默认矢量图层显示 影像图层不显示 用图层id来区分
         */
          axios.get("/static/Data/config.xml").then(function(response) {
            // handle success
            //console.log(response);
            var configXml = self.string2XML(response.data);
            console.log(configXml);
            //获取xml指定标签
            var tag = configXml.getElementsByTagName("mapzone");
            //获取标签指定属性值
            var murl = tag[0].getAttribute("murl");
            var murl2 = tag[1].getAttribute("murl");
            var mapPane = new MapPane({
              region: "center",
              basemap: [
                {
                  url: murl,
                  // "http://www.hangzhoumap.gov.cn/Tile/ArcGISFlex/HZTDTVECTORBLEND.gis",
                  id: "vectormap",
                  index: 1,
                  visible: true
                },
                {
                  url: murl2,
                  //  "http://www.hangzhoumap.gov.cn/Tile/ArcGISFlex/HZTDTVECTORBLEND.gis",
                  id: "imagemap",
                  index: 2,
                  visible: false
                }
              ],
              layers: [],
              options: {
                id: self.mapId, //不指定id，会自动分配
                sliderPosition:"bottom-right",
                //minZoom:4,
        /*          spatialReference: new esri.SpatialReference({
					wkid: 4490
				}), */
                center: new esri.geometry.Point(self.x, self.y, new esri.SpatialReference({ wkid: self.wkid })),//[120.3436318879092, 30.272064471999997],
                zoom: self.zoom
              }
            });
            /* map.placeAt(self.mapId);*/
            mapPane.startup();
            
            topic.subscribe("afterMapLoaded", function(parames) {
              new BasemapGallery({ map: parames.map }).placeAt(
                parames.map.root
              );
              var maps = Global.maps;
               var mapIds = ["mainMap","towMap","treeMap","fourMap"];
              if (maps[self.mapId] && self.mapId != parames.map.id) {
                console.log("map'" + self.mapId + "'已经添加到MapManager中");
                return;
              } else {
                maps[self.mapId] = parames.map;
                self.bindMapEvent(maps[self.mapId]);
                mapEventManager.initExtentEvent(mapIds);
              }
            });
          });
        });

      /*    })
        .catch(err => {
          console.error(err);
        }); */
    },
    bindMapEvent: function(map) {
       map.on("load", function() {
        console.log(map.spatialReference+"load");
      });
      map.on("click", function(e) {
        console.log(e.mapPoint);
        console.log(map.spatialReference);
        var data = {
          map: map,
          point: e.mapPoint
        };
        Bus.$emit("searchbyclick", data);
      });
    }
  }
};
</script>
<style>
/*@import url('http://21.15.116.29:82/arcgis_js_api/library/3.17/3.17/esri/css/esri.css');*/
/* @import url("https://js.arcgis.com/3.16/esri/css/esri.css"); */
.esriSimpleSliderDecrementButton .esriIconFallbackText {
  display: none;
}
.esriSimpleSliderIncrementButton .esriIconFallbackText {
  display: none;
}
.map .logo-med {
  display: none;
}
.esriSimpleSliderBR{
  bottom:90px !important;
}
.map {
  height: 100%;
}
</style>
